<template>
  <view class="contain">
    <view class="header">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏内容 -->
      <view
        class="navbar"
        :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }"
      >
        <i class="iconfont icon-left" @click="goBack"></i>
        <span>{{ title }}</span>
      </view>
    </view>
    <view class="body">
      <view class="content">
        <u--form
          :model="from"
          ref="From"
          :label-style="{ 'font-size': '32rpx' }"
        >
          <u-form-item
            label="姓名"
            prop="receiver"
            labelWidth="200rpx"
            borderBottom
          >
            <u--input
              border="none"
              v-model="from.receiver"
              placeholder="请填写收货人姓名"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="手机号码"
            labelWidth="200rpx"
            borderBottom
            leftIconStyle="font-size: 20rpx"
          >
            <u--input
              border="none"
              v-model="from.contact"
              placeholder="请填写收货人手机号码"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="省/市/县（区"
            labelWidth="200rpx"
            borderBottom
            @click="openPicker"
          >
            <u--input
              v-model="from.fullLocation"
              border="none"
              placeholder="请填写收货人所在城市"
            ></u--input>
          </u-form-item>
          <u-form-item label="详细地址" labelWidth="200rpx" borderBottom>
            <u--input
              border="none"
              placeholder="街道、楼牌号信息"
              v-model="from.address"
            ></u--input>
          </u-form-item>
          <u-form-item label="设置默认地址" labelWidth="200rpx" borderBottom>
            <u-switch
              v-model="value"
              activeColor="#28bb9c"
              size="20"
              @change="changeSwitch"
            ></u-switch>
          </u-form-item>
        </u--form>
      </view>
      <button class="button" @click="submit">{{ button }}</button>
      <view>
        <u-picker
          :show="pickerShow"
          ref="Picker"
          :columns="columns"
          @confirm="confirm"
          @change="changeHandler"
          @cancel="cancel"
        ></u-picker>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20,
      navBarHeight: 45,
      windowWidth: 375,
      title: "",
      button: "确认",
      value: false,
      // from: {
      //   receiver: "",
      //   contact: "",
      //   fullLocation: "",
      //   address: "",
      //   isDefault: "",
      //   provinceCode: 456789,
      //   cityCode: 123468,
      //   countyCode: 789456
      // },
      id: "",
      from: {
        receiver: "",
        contact: "",
        provinceCode: "110000",
        cityCode: "110100",
        countyCode: "110101",
        address: "",
        postalCode: "44",
        addressTags: "接书拉",
        isDefault: 0,
        fullLocation: "",
      },
      rules: {
        receiver: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          },
        ],
      },
      pickerShow: false,
      columns: [
        ["北京市", "湖北省"],
        ["深圳", "厦门", "上海", "拉萨"],
        ["东城区", "西城区", "朝阳区"],
      ],
    };
  },
  created() {
    // 获取手机信息
    const info = uni.getSystemInfoSync();
    // console.log(info.statusBarHeight)
    this.statusBarHeight = info.statusBarHeight;
    this.windowWidth = info.windowWidth;

    // 获取胶囊按钮位置
    // #ifndef APP-PLUS || H5 || MP-ALIPAY
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // console.log(menuButtonInfo)
    // （胶囊底部高度-状态栏的高度）+ （胶囊顶部的高度-状态栏的高度）== 导航栏的高度
    this.navBarHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);
    // console.log(navBarHeight)
    this.windowWidth = menuButtonInfo.left;
    // #endif
  },
  onLoad(options) {
    console.log("编辑id", options.id);
    this.title = options.name;
    this.id = options.id;
    if (options.id) {
      this.selectAddressDetail(options.id);
      this.button = "保存";
    } else {
      this.button = "确认";
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 增加地址
    async addAddress() {
      const res = await uni.$u.http.post("/member/address", this.from);
      console.log("增加地址", res);
    },
    // 查询地址详情
    async selectAddressDetail(id) {
      const res = await uni.$u.http.get(`/member/address/${id}`);
      console.log("查询地址", res);
      this.from = res.data.result;
    },
    // 更新地址
    async updateAddress(id) {
      const res = await uni.$u.http.put(`/member/address/${id}`, this.from);
      console.log("更新地址", res);
    },
    changeSwitch() {
      this.value ? (this.from.isDefault = 1) : (this.from.isDefault = 0);
      console.log(this.from.isDefault);
    },
    submit() {
      this.value ? (this.from.isDefault = 1) : (this.from.isDefault = 0);
      this.id ? this.updateAddress(this.id) : this.addAddress();
      uni.redirectTo({
        url: "/pages/my/address/index",
      });
      // this.$refs.Form.validate()
      //   .then((res) => {
      //     uni.$u.toast("校验通过");
      //   })
      //   .catch((errors) => {
      //     uni.$u.toast("校验失败");
      //   });
    },
    // changeHandler(e) {
    //   const {
    //     columnIndex,
    //     value,
    //     values, // values为当前变化列的数组内容
    //     index,
    //     // 微信小程序无法将picker实例传出来，只能通过ref操作
    //     picker = this.$refs.uPicker,
    //   } = e;
    //   // 当第一列值发生变化时，变化第二列(后一列)对应的选项
    //   if (columnIndex === 0) {
    //     // picker为选择器this实例，变化第二列对应的选项
    //     picker.setColumnValues(1, this.columnData[index]);
    //   }
    // },
    openPicker() {
      this.pickerShow = true;
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      console.log("confirm", e);
      this.pickerShow = false;
      this.from.fullLocation = e.value.join("");
      console.log(this.fullLocation);
    },
    cancel() {
      this.pickerShow = false;
    },
  },
};
</script>


<style lang="scss">
@import "../../../static/fonts.scss";
.contain {
  background-color: rgba(244, 242, 242, 0.927);
  height: 560px;
  .header {
    background-color: #fff;
    .navbar {
      display: flex;
      align-items: center;
      width: 100%;
      height: 56px;
      i {
        width: 20px;
        // height: 20px;
        // background-color: aqua;
      }
      span {
        flex: 1;
        text-align: center;
      }
    }
  }
  .body {
    padding: 10px;
    .content {
      width: 92%;
      padding: 0 12px;
      background-color: #fff;
    }
    .button {
      color: #fff;
      height: 16px;
      width: 98%;
      margin-top: 10px;
      line-height: 40px;
      font-size: 14px;
      background-color: #0ecfa5;
      height: 40px;
      border-radius: 20px;
    }
  }
}
</style>